import React, { useEffect } from 'react';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input, Image } from 'antd';
import bj from '../../img/1.png'
import instance from '../../api/instance';
import { useNavigate } from 'react-router-dom';

type FieldType = {
    account?: string;
    password?: string;
    remember?: string;
};


const Login: React.FC = () => {
    const navigate=useNavigate()

    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        instance.post('/login',values).then((res)=>{
            // 文件名：login/Index.tsx 行数：20
            console.log('res',res)
            if(res.data.token){
                localStorage.setItem('token',res.data.token)
                localStorage.setItem('username',res.data.username)
                navigate('/home')
            }
        })
    };

    return (
        <div className='flex'>
            <img src={bj} alt="" style={{ height: '900px' }} />
            <div className='w-[600px] bg-sky-950'>
                <div className='w-[500px] mt-[200px]'>
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        autoComplete="off"
                    >
                        <Form.Item<FieldType>
                            label="用户名"
                            name="account"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item<FieldType>
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '6到12位数字字母组成' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                        >
                            <div className='flex'>
                                <Input style={{ width: '150px', height: '40px', marginRight: '10px' }} />
                                <img src="https://picsum.photos/200/300?random=1" style={{ width: '150px', height: '50px' }} />
                            </div>
                        </Form.Item>

                        <Form.Item<FieldType> name="remember" valuePropName="checked" label={null}>
                            <Checkbox>记住密码</Checkbox>
                        </Form.Item>

                        <Form.Item label={null}>
                            <Button type="primary" htmlType="submit" className='w-[350px]'>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    )
};

export default Login;